<template>
    <div class="container roundy-5 border-1 border-skyblue">
        <table>
            <thead>
                <tr height="50">
                    <th>等级</th>
                    <th>招式</th>
                    <th>属性</th>
                    <th>分类</th>
                    <th>威力</th>
                    <th>命中</th>
                    <th>P P</th>
                </tr>
            </thead>
            <tbody class="font-size-15"> 
                <tr height="30" v-for="(skill, index) of pokemon.learnSetByLevelingUp" :key="index" class="text-center bg-white">
                    <td>{{skill.level}}</td>
                    <td :class="{'font-bold': (skill.type == pokemon.type1 || skill.type == pokemon.type2)}">
                        {{skill.move}}
                    </td>
                    <td :class="getColorByType(label=false, type=skill.type)" class="text-white">
                        {{skill.type}}
                    </td>
                    <td :class="getColorBySkillType(skill.category)" class="text-white">
                        {{skill.category}}
                    </td>
                    <td>{{skill.power}}</td>
                    <td>{{skill.accuracy}}</td>
                    <td>{{skill.pp}}</td>
                </tr>
                <tr>
                    <td colspan="7" height="50" class="text-center font-size-15">
                        <span class="tips  font-bold">粗体</span>的招式为本系招式享受1.5倍加成。 <br>
                        <span class="tips">等级中的"—"表示此招式可通过招式教学习得。</span> 
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    name: "PokemonSkill",
    props: ["pokemon", "getColorByType", "getColorBySkillType"],
}
</script>

<style lang="less" scoped>
.container {
    max-width: 600px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

td {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}

@media screen and (min-width: 601px) {
    .container {
        margin-left: auto;
        margin-right: auto;
    }
}

</style>